.check-in {
  width: 100%;
  .check-in-content {
    padding-bottom: 100rpx;
    .nut-tabs__content {
    }
    .nut-tabs__titles {
      border-bottom: 1rpx solid #f6f9ff;
    }
    .nut-tab-pane {
      padding: 0;
    }
    .nut-tabs__titles-item {
      // width: 20% !important;
      // height: 80rpx !important;
      // border-radius: 20rpx !important;
      // margin: 0 20rpx;
      // font-size: 28rpx !important;
      background-color: #fff;
      color: #999 !important;
    }
    .nut-tabs__titles-item.active {
      color: #101010 !important;

      .nut-tabs__titles-item__line {
        background: #1e74fd !important;
        width: 30rpx;
      }
    }
    .check-in-item {
      margin-top: 50rpx;
      .con-title {
        padding: 0 32rpx;
        box-sizing: border-box;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 50rpx;
        border-bottom: 1rpx solid #f5f5f5;
        .con-title-left {
          display: flex;
          align-items: center;
          img {
            width: 104rpx;
            height: 104rpx;
            border-radius: 38rpx;
            background-color: #999;
          }
          .title-text {
            text {
              margin-left: 24rpx;
              display: block;
              line-height: 45rpx;
            }
            text:nth-of-type(1) {
              font-weight: 600;
              font-size: 32rpx;
              color: #101010;
            }
            text:nth-of-type(2) {
              font-size: 24rpx;
              color: #1e74fd;
            }
          }
        }
        .con-title-right {
          text-align: center;
          text {
            display: block;
            font-size: 24rpx;
            color: #666;
          }
          img {
            width: 44rpx;
            height: 44rpx;
          }
        }
      }
      .positioning-prompt {
        width: 100%;
        padding: 0 32rpx;
        box-sizing: border-box;
        background: #eef1ff;
        .positioning-prompt-box {
          display: flex;
          padding: 20rpx 0;
          box-sizing: border-box;
          .positioning-prompt-left {
            .iconfont {
              padding-right: 10rpx;
              box-sizing: border-box;
              font-size: 36rpx;
              color: #1e74fd;
            }
          }
          .positioning-prompt-right {
            font-size: 28rpx;
            color: #001230;
          }
        }
      }
      .con-item {
        display: flex;
        justify-content: space-between;
        margin-top: 50rpx;
        padding: 0 32rpx;
        box-sizing: border-box;
        .con-item-left {
          .check-in-time-box {
            // height: 400rpx;
            .time {
              margin-bottom: 80rpx;
              .in-time {
                display: flex;
                align-items: center;
                .check-icon {
                  width: 16rpx;
                  height: 16rpx;
                  border: 1rpx solid #eeeeee;
                  border-radius: 50%;
                  position: relative;
                  text:nth-of-type(1) {
                    position: absolute;
                    top: 30rpx;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                    width: 0rpx;
                    height: 170rpx;
                    border: 1rpx dashed #eee;
                  }
                }
                .in-time-text {
                  display: inline-block;
                  padding-left: 20rpx;
                  box-sizing: border-box;
                  font-size: 28rpx;
                  color: #999;
                  .nut-tag {
                    margin-left: 10rpx;
                  }
                }
              }
              .in-time.active {
                .check-icon {
                  border: 1rpx solid #1e74fd;
                }
                .in-time-text {
                  font-weight: 600;
                  font-size: 28rpx;
                  color: #101010;
                }
              }
              .check-time {
                margin: 24rpx 0 0 36rpx;
                .check-time-text {
                  display: flex;
                  align-items: center;
                  font-weight: 600;
                  font-size: 32rpx;
                  color: #101010;
                  .nut-tag {
                    margin-left: 10rpx;
                    font-size: 24rpx;
                    font-weight: 400;
                  }
                }
                .check-adress {
                  padding-top: 12rpx;
                  box-sizing: border-box;
                  font-size: 24rpx;
                  color: #999999;
                  .iconfont {
                    padding-right: 10rpx;
                    box-sizing: border-box;
                    font-size: 24rpx;
                  }
                }
              }
              .check-field-personnel {
                margin: 24rpx 0 0 36rpx;
                font-size: 24rpx;
                color: #999;
              }
              .check-miss {
                margin: 24rpx 0 0 40rpx;
                font-size: 24rpx;
                color: #1e74fd;
                .iconfont {
                  font-size: 20rpx;
                }
              }
            }
            .time:nth-last-child(1) {
              .in-time {
                .check-icon {
                  text:nth-of-type(1) {
                    display: none;
                  }
                }
              }
            }
          }
        }
        .con-item-right {
          .positioning-btn {
            font-size: 24rpx;
            color: #1e74fd;
            .iconfont {
              font-size: 24rpx;
              padding-right: 5rpx;
              box-sizing: border-box;
            }
          }
        }
      }

      .check-in-btn {
        width: 100%;
        margin-top: 30rpx;
        // line-height: 234rpx;
        .check-btn-con {
          height: 400rpx;
          position: relative;
          //   overflow-y: hidden;
          .check-btn {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%); /* 反向偏移自身宽高的 50% */
            text-align: center;
            width: 236rpx;
            height: 236rpx;
            // background: linear-gradient(159deg, #50c9ff 0%, #1e74fd 100%);
            border-radius: 50%;
            .check-btn-text-box {
              width: 100%;
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%); /* 反向偏移自身宽高的 50% */
              .check-btn-text {
                text {
                  font-weight: 600;
                  font-size: 36rpx;
                  color: #fff;
                }
              }
              .check-btn-time {
                text {
                  font-size: 28rpx;
                  // color: #99ccfe;
                }
              }
            }
            z-index: 5;
          }

          /* 波纹圈通用样式 */
          .ripple-circle {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
          }
          .ripple-circle1 {
            width: 276rpx;
            height: 276rpx;
            border-radius: 50%;
            // background: linear-gradient(159deg, #dfe9fc 0%, #e5efff 100%);
            z-index: 4;
            animation: rippleFade 2s infinite;
          }
          .ripple-circle2 {
            width: 316rpx;
            height: 316rpx;
            border-radius: 50%;
            // background: linear-gradient(159deg, #ecf2fc 0%, #f2f7ff 100%);
            z-index: 3;
            animation: rippleFade 2s infinite;
          }
          .ripple-circle3 {
            width: 356rpx;
            height: 356rpx;
            border-radius: 50%;
            // background: linear-gradient(159deg, #f4f9fd 0%, #ffffff 100%);
            z-index: 2;
            animation: rippleFade 2s infinite;
          }
          /* 波纹淡出动画 */
          @keyframes rippleFade {
            0% {
              opacity: 0;
              transform: translate(-50%, -50%) scale(0.9);
            }
            10% {
              opacity: 0.5;
            }
            30% {
              opacity: 1;
            }
            60% {
              opacity: 0.5;
            }
            100% {
              opacity: 0;
              transform: translate(-50%, -50%) scale(1.2);
            }
          }
        }
        // 蓝色按钮

        .check-btn-con.blue {
          .check-btn {
            background: linear-gradient(159deg, #50c9ff 0%, #1e74fd 100%);
            .check-btn-text-box {
              .check-btn-time {
                text {
                  color: #99ccfe;
                }
              }
            }
          }
          .ripple-circle1 {
            background: linear-gradient(159deg, #dfe9fc 0%, #e5efff 100%);
          }
          .ripple-circle2 {
            background: linear-gradient(159deg, #ecf2fc 0%, #f2f7ff 100%);
          }
          .ripple-circle3 {
            background: linear-gradient(159deg, #f4f9fd 0%, #ffffff 100%);
          }
        }
        //   灰色按钮
        .check-btn-con.grey {
          .check-btn {
            background: linear-gradient(159deg, #e9e9e9 0%, #999999 100%);
            .check-btn-text-box {
              .check-btn-time {
                text {
                  color: #ddd;
                }
              }
            }
          }
          .ripple-circle1 {
            background: linear-gradient(159deg, #f6f6f6 0%, #f3f3f3 100%);
          }
          .ripple-circle2 {
            background: linear-gradient(159deg, #fbfbfb 0%, #fafafa 100%);
          }
          .ripple-circle3 {
            background: linear-gradient(159deg, #fbfbfb 0%, #fff 100%);
          }
        }
        //   橙色按钮
        .check-btn-con.orange {
          .check-btn {
            background: linear-gradient(159deg, #ffb950 0%, #fd861e 100%);
            .check-btn-text-box {
              .check-btn-time {
                text {
                  color: #ddd;
                }
              }
            }
          }
          .ripple-circle1 {
            background: linear-gradient(159deg, #fff3e5 0%, #ffefe0 100%);
          }
          .ripple-circle2 {
            background: linear-gradient(159deg, #fffaf3 0%, #fff8f1 100%);
          }
          .ripple-circle3 {
            background: linear-gradient(159deg, #fffdfb 0%, #fff 100%);
          }
        }

        .check-btn-placeholder {
          text-align: center;
          font-size: 24rpx;
          color: #101010;
          .iconfont {
            font-size: 24rpx;
            color: #fb8f1e;
            padding-right: 10rpx;
            box-sizing: border-box;
          }
          .iconfont.grey {
            color: #bababa;
          }
          .iconfont.blue {
            color: #1e74fd;
          }
        }
      }
      .check-in-success {
        width: 100%;
        .check-in-success-box {
          width: 100%;
          margin-top: 50rpx;
          .check-success-status {
            margin: 0 auto;
            width: 100%;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            img {
              width: 186rpx;
              height: 186rpx;
            }
            text:nth-of-type(1) {
              font-weight: 600;
              font-size: 36rpx;
              color: #101010;
              margin: 20rpx;
            }
            .update-check-in {
              font-size: 24rpx;
              color: #1e74fd;
            }
          }
          .check-success-list {
            width: 100%;
            margin-top: 50rpx;
            .check-success-item {
              width: 100%;
              .check-success-title {
                padding: 0 32rpx;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                text:nth-of-type(1) {
                  display: block;
                  width: 6rpx;
                  height: 20rpx;
                  background: #1e74fd;
                  border-radius: 40rpx 0rpx 0rpx 40rpx;
                }
                text:nth-of-type(2) {
                  padding-left: 12rpx;
                  box-sizing: border-box;
                  font-weight: 600;
                  font-size: 32rpx;
                  color: #101010;
                }
              }
            }
          }
        }
      }
    }
    .nut-tabbar-item_icon-box {
      display: flex;
      .nut-tabbar-item_icon-box_icon {
        display: block;
      }
      .nut-badge {
        display: flex;
        align-items: center;
      }
    }
  }
}
